<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>编辑个人信息</title>

    <link rel="stylesheet" href="/statics/css/bootstrap.min.css">
    <link rel="stylesheet" href="/statics/css/users.css">
    <link rel="stylesheet" href="../layui/css/layui.css">
    <!-- 网页icon头像 -->
    <link rel="shortcut icon" href="/statics/img/loginOk.png">

</head>

<body>
    <ul class="layui-nav" lay-filter="">
        <li class="layui-nav-item"><a href="/home">首页</a></li>
        <li class="layui-nav-item  layui-this">
            <a href="/home/personalDetails">个人信息</a>
            <dl class="layui-nav-child">
                <!-- 二级菜单 -->
                <dd><a href="/home/editPersonalDetails">编辑个人信息</a></dd>
            </dl>
        </li>
        <li class="layui-nav-item"><a href="/home/publishQS">创建问卷调查</a></li>
        <li class="layui-nav-item">
            <a href="javascript:;">问卷管理</a>
            <dl class="layui-nav-child">
                <!-- 二级菜单 -->
                <dd><a href="/home/userPubishQS">发布的问卷</a></dd>
                <dd><a href="/home/fillInQS">填写的问卷</a></dd>
            </dl>
        </li>
        <li class="layui-nav-item"><a href="/home/inRegardToXiaoPang">关于小胖</a></li>
    </ul>
    <div id="container">

        <div class="row" style="margin-right: 0px;">
            <!-- 左布局 -->
            <div class="col">

            </div>
            <!-- 中间布局 -->
            <div class="col">
                <form class="layui-form" action="">
                    <div class="card" style="width: 18rem;">
                        <img src="/statics/img/userHeadPortrait.jpg" class="card-img-top" alt="">
                        <div class="card-body">
                            <h5 class="card-title">个人简介</h5>
                            <p class="card-text"><textarea name="desc" placeholder="请输入简介" id="individualResume"
                                    class="layui-textarea"></textarea></p>
                        </div>
                        <ul class="list-group list-group-flush">
                            <!-- 个人信息表单 -->

                            <li class="list-group-item" id="introductionColumn">用户：{{userName}}</li>
                            <li class="list-group-item" id="introductionColumn">性别： <input type="radio" name="sex"
                                    value="男" title="男" checked>
                                <input type="radio" name="sex" value="女" title="女">
                            <li class="list-group-item" id="introductionColumn">电话号码： <input type="text"
                                    id="phoneNumber" name="title" required lay-verify="required" placeholder="请输入电话号码"
                                    autocomplete="off" class="layui-input"></li>
                            <li class="list-group-item" id="introductionColumn">兴趣爱好： <input type="text" id="interest"
                                    name="title" required lay-verify="required" placeholder="请输入兴趣爱好" autocomplete="off"
                                    class="layui-input"></li>
                            <a class="card-link btn btn-info" style="margin: 1rem;"
                                onclick="preserve()">保存</a>
                            <a href="/home/personalDetails" class="card-link btn btn-info" style="margin: 1rem;">取消编辑</a>
                                
                                <label for="" class="errorSubmitForm invisible"
                                style="color: red; margin-left: 5rem;"><strong>未完成所有题目，请检查后再提交</strong></label>

                        </ul>
                </form>
            </div>
        </div>

        <!-- 右布局 -->
        <div class="col">

        </div>
    </div>
    </div>




    <script src="/statics/js/jquery-3.6.0.min.js"></script>
    <!-- axios -->
    <script src="https://cdn.bootcss.com/axios/0.18.0/axios.min.js"></script>

    <script src="/statics/js/bootstrap.min.js"></script>
    <script src="/statics/js/SpiderWeb.js"></script>
    <script src="../layui/layui.js"></script>
    <script>
        layui.use(['layer', 'form'], function () {
            var layer = layui.layer
                , form = layui.form;
            var element = layui.element;
        });
    </script>



    <script>
        function preserve() {
            // 获取数据
            //性别
            var sex = $("input[name='sex']:checked").val();
            //电话号码
            var phoneNumber = $("#phoneNumber").val();
            //兴趣爱好
            var interest = $("#interest").val();
            //个人简介
            var individualResume = $("#individualResume").val();
            // console.log(sex);
            // console.log(phoneNumber);
            // console.log(individualResume);

            //手机号码，兴趣爱好，个人简历暂时不给正则判断
            if (phoneNumber.length > 30) {
                fn_errorSubmitForm("电话号码长度不能大于30个字符");
            } else if(interest.length > 100) {
                fn_errorSubmitForm("兴趣爱好长度不能大于100个字符");
            }else if(individualResume.length > 300){
                fn_errorSubmitForm("简介长度不能大于300个字符");
            }else{
                 axios({
                method: "post",
                url: "/home/personalDetailsJudge",
                data: {
                    sex,
                    phoneNumber,
                    interest,
                    individualResume
                }
            }).then(function (response) {
                // axios工具下，服务器真正返回的数据在返回对象的data中
                var res = response.data;
                if (res.code === 200) {
                    window.location.href = '/home/personalDetails';
                }
            })
        }
            }
           
    </script>

    <script>
        // 用户名下面的错误提示函数
        function fn_errorSubmitForm(errorHint) {
            $('.errorSubmitForm').text(errorHint);
            $('.errorSubmitForm').removeClass('invisible');
            setTimeout(() => {
                $('.errorSubmitForm').addClass('invisible');
            }, 5000);
        }
    </script>














    <!-- 鼠标点击特效  -->
    <!-- <script type="text/javascript">
        var a_idx = 0;
        jQuery(document).ready(function ($) {
            $("body").click(function (e) {
                var a = new Array("(⌒▽⌒)", "(=・ω・=)", "(ﾟДﾟ≡ﾟдﾟ)!?", "Σ( ￣□￣||)", "(▔□▔)/", "Σ(ﾟдﾟ;)", "(^・ω・^ )", "（￣へ￣）", "(￣ε(#￣) Σ", "ヽ(`Д´)ﾉ", "(╯°口°)╯┴—┴", "🍕", "🍔", "🌭", "🥞", "🍳", "🍞", "🥐", "🍠", "🥙", "🍤", "🥩", "🍖", "🥂", "🥗", "🧀", "🍱", "🍝", "🐷", "❤", "🤣", "💕", "💖", "🌹", "💋", "🎂", "🎉", "🎃", "🎈", "🎀", "🎊", "🚗", "🎄", "❤", "💕", "💞", "💓", "💗", "💖", "💘", "💝", "💟", "💌", "🍟", "🍗", "🍿", "江呆呆是个憨憨💕💟💌");
                var $i = $("<span></span>").text(a[a_idx]);
                a_idx = (a_idx + 1) % a.length;
                var x = e.pageX,
                    y = e.pageY;
                $i.css({
                    "z-index": 999999999999999999999999999999999999999999999999999999999999999999999,
                    "top": y - 20,
                    "left": x,
                    "position": "absolute",
                    "font-weight": "bold",
                    "color": "rgb(" + ~~(255 * Math.random()) + "," + ~~(255 * Math.random()) + "," + ~~(255 * Math.random()) + ")"
                });
                $("body").append($i);
                $i.animate({
                    "top": y - 180,
                    "opacity": 0
                },
                    1500,
                    function () {
                        $i.remove();
                    });
            });
        });
    </script> -->

</body>


</html>